<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  name: "BarChatTwo",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '700px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          text: 'Rainfall',
          subtext: 'Fake Data'
        },
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: ['Rainfall']
        // },
        toolbox: {
          show: false,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        // calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            // name: 'Rainfall',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint: {
              data: [
                {
                  xAxis: 1, //放需要展示图片的x轴索引
                  yAxis: 2.0, //y轴对应的值
                  symbol: "image://" + "http://120.46.209.88:9222/prod-api/profile/avatar/2025/06/04/%E5%8D%9A%E8%AF%BA%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%E6%A1%8C%E9%9D%A22025%E7%89%88v2(1)(1)(2)_20250604085721A001.jpg",
                },
                {
                  xAxis: 6, //放需要展示图片的x轴索引
                  yAxis: 135.6, //y轴对应的值
                  symbol: "image://" + "http://120.46.209.88:9222/prod-api/profile/avatar/2025/06/04/%E5%8D%9A%E8%AF%BA%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%E6%A1%8C%E9%9D%A22025%E7%89%88v2(1)(1)(2)_20250604085721A001.jpg",
                },
                {
                  xAxis: 2, //放需要展示图片的x轴索引
                  yAxis: 7.0, //y轴对应的值
                  symbol: "image://" + "http://120.46.209.88:9222/prod-api/profile/avatar/2025/06/04/%E5%8D%9A%E8%AF%BA%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%E6%A1%8C%E9%9D%A22025%E7%89%88v2(1)(1)(2)_20250604085721A001.jpg",
                },
              ],
              symbolSize: [30, 30],
              symbolOffset: [0, "-100%"],
              label: {
                show: false,
              },
            },
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // }
          },
        ]
      })
    }
  }
}
</script>
